import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import { Badge } from 'antd-mobile';
import { Carousel } from 'antd-mobile';
// import {img} from '../../images/logo.jpg'
// 顶部组件
class Top extends Component {
  render() {
    return (
      <div className="top">
        <div><i className="iconfont">&#xe608;</i></div>
        <div className="imgDiv"><img src={require("../../images/logo.jpg")}></img></div>
        <div><i className="iconfont">&#xe934;</i></div>
      </div>
    )
  }
}


// 轮播图
class Swiper extends Component {
  state = {
    data: ['1', '2', '3', '4'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['https://img01.hua.com/uploadpic/newpic/9012441.jpg',
          'https://img01.hua.com/uploadpic/newpic/201908281546220651.jpg',
          'https://img01.hua.com/uploadpic/newpic/201908281546286007.jpg',
          "https://img01.hua.com/uploadpic/newpic/201908281546348823.jpg"],
      });
    }, 100);
  }
  render() {
    return (
      <Carousel
        autoplay={true}
        infinite
      // beforeChange={(from, to) => `slide from ${from} to ${to}`}
      // afterChange={index => 'slide to', index}
      >
        {this.state.data.map(val => (
          <a
            key={val}
            href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
          >
            <img
              src={`${val}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}
      </Carousel>

    );
  }
}

// 主干
class Body extends Component {
  render() {
    return (
      <div className="mainBody">
        <div className="flowerInfo">
          <div className="flowerText">语笑嫣然-粉佳人玫瑰9枝、粉色小菊、洋桔梗、尤加利叶
            <span>倾情设计，女士优选</span><i className="iconfont star">&#xe635;</i>
          </div>
          <div className="price">
            <span>￥634</span>
            <del>￥634</del>
            <div className="right">已售888件</div>
          </div>
        </div>
        <div className="flowerApp">
          <i className="iconfont">&#xe658;</i>
          <span>App下单立减</span>
          <i className="iconfont right">&#xe60b;</i>
        </div>
        <div className="detail">
            <div className="inDetail">
              <span>花语</span>
              <div>世界万物，都抵不过你莞尔一笑。</div>
            </div>
            <div className="inDetail">
              <span>材料</span>
              <div>粉佳人玫瑰9枝、粉色小菊3枝、洋桔梗5枝、尤加利d发的说说叶5枝</div>
            </div>
            <div className="inDetail">
              <span>配送</span>
              <div>限送100多个主要城市的市区及近郊：北京,上海<i className="iconfont">&#xe629;</i></div>
            </div>
            <div className="inDetail">
              <span>附送</span>
              <div>下单填写留言，即免费赠送精美贺卡！</div>
            </div>

        </div>
        <div className="send">
          <div>配送至
            <i className="iconfont">&#xe61c;</i>
            <span>请选择配送地区</span>
          </div>
          <i className="iconfont">&#xe647;</i>
        </div>
        <div className="evaluate">
          <span>订单评价</span>
          <span>已有233条评价<i className="iconfont">&#xe60b;</i></span>
        </div>







      </div>
    )
  }
}





// 底部组件
class Footer extends Component {
  render() {
    return (

      <div className="footer flex aic" >
        <div className="flex2 jc-sa haveicon"><i className="iconfont">&#xe62e;</i><span>客服</span></div>
        <div className="flex2 jc-sa haveicon">
          <Badge size="Small" text={5} style={{ background: "#F4993E" }}>
            <i className="iconfont">&#xe633;</i>
          </Badge>
          <span>购物车</span></div>
        <div className="addCart havetext">加入购物车</div>
        <div className="beyNow havetext">立即购买</div>
      </div>
    )
  }
}

// 主页面
export class DefaultPage extends Component {
  static propTypes = {
    detail: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  render() {
    return (
      <div className="detail-default-page">
        <Top></Top>
        <Swiper></Swiper>
        <Body></Body>
        <Footer></Footer>
      </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    detail: state.detail,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
